<template>
  <div class="raffle-wrap" style="background: #543ad0">
    <!--fixed定位的时候显示timeline模块-->
    <Header :fixed="fixedLine" v-show="fixedLine"></Header>
    <!--显示timeline模块的时候，加上scrollH类，重置高度-->
    <Scroll ref="scroll" :probeType="3" :listenScroll="true" :bounce="false" @scroll="fixTimeline" :class="{scrollH:this.fixedLine}">
      <div class="pad40">
        <Header :fixed="fixedLine" id="defaultHeader"></Header>
        <div class="h328" v-show="fixedLine"></div>
      </div>
      <!-- <video
        id="video"
        :src="videoUrl"
        controls = "true"
        preload="auto"
        webkit-playsinline="true"
        x5-playsinline="true"
        playsinline="true"
        x-webkit-airplay="allow"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        x5-video-orientation="landscape|portrait"
        style="object-fit:fill;width: 100%;">
      </video>-->
      <div class="raffle-item">
        <p class="title">疯狂828 全民免费充!</p>
        <div class="flower-box">
          <p>活动当天，星星充电APP用户在红包站点充电全免！</p>
          <p>备注：参与活动的用户需配合现场管理人员引导，否则星星充电有权取消该账户活动资格；</p>
          <p>a、活动不限支付方式、不限充电次数、不限个人或企业身份；</p>
          <p>b、仅限星星充电APP上显示红包标识的桩群；</p>
          <p>c、微信小程序充电方式不参与；</p>
          <p>d、支付余额需≥0元</p>
        </div>
      </div>
      <!--<div class="raffle-item qipao">-->
      <!--<p class="title">充值狂欢，返的比充的多!</p>-->
      <!--<div class="flower-box">-->
      <!--<p class="info">通过星星充电APP充电满<span class="important">10度</span>即可参与充值返券活动；</p>-->
      <!--<div class="btn-box">-->
      <!--<p class="ruleBtn" @click.prevent.stop="openChargeRule">充值规则</p>-->
      <!--</div>-->
      <!--<div class="flex-between">-->
      <!--<div class="hongbao" v-for="(item, index) in buyPrice" :key="`buyPrice${index}`">-->
      <!--<div class="price flex-column-between"><p>充值{{item.payPrice}}元返</p><p class="num">{{item.backPrice}}</p><p>抵用券</p></div>-->
      <!--<div class="pay" :id="item.payValue" @click.prevent.stop="pay">去充值</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--<p class="text-tip">（仅当天充值有效，返还抵用券限自营电站使用）</p>-->
      <!--</div>-->
      <!--</div>-->
      <div class="raffle-item qipao-bottom">
        <p class="title">中奖百分百，汽车开回家!</p>
        <div class="flower-box no-pad">
          <div class="padBox">
            <p class="info">8月28日，在20点28分前使用星星充电APP在有红包标识的桩群上充电且单笔充电订单大于等于
              <span class="important">10度</span>即可参与抽奖。</p>
            <div class="btn-box">
              <p class="countTime-info" v-if="!dayTimeBegin">08月28日 20:28 开始抽奖</p>
              <p class="Quartz-Mdm" v-else>{{countTime}}</p>
              <p class="ruleBtn" @click.prevent.stop="openPrizeRule">抽奖规则</p>
            </div>
            <!--<div class="scratch-prize flex-column-between">-->
            <!--<p class="tip">幸运大抽奖 汽车开回家</p>-->
            <!--<div class="guajiang-btn">点击刮奖</div>-->
            <!--</div>-->
            <div v-for="(i, index) in lotteryChance" v-if="lotteryChance.length > 0" :key="`lottery${index}`">
              <ScratchCard :id="i" :countTimeBegin="beginFlag" :countTime="countTime" />
            </div>
            <div v-for="(i, index) in cardData" :key="`card${index}`">
              <ScratchCard :cardInfo="i" :countTimeBegin="beginFlag" />
            </div>
          </div>
          <div class="marquee">
            <i class="marquee-icon"></i>
            <MarqueeTips :content="marqueeContent" :speed="20"></MarqueeTips>
          </div>
          <div class="swiper-gift ">
            <img src="../../../assets/img/prev.png" alt="" class="prev" @click="$refs.smSlide.prev()">
            <slide ref="smSlide" :showDot="false" :stopPropagation="true" :autoPlay="false" :showPrev="true" :showNext="true" :allowEmit="false">
              <div v-for="(slideItem,slideindex) in giftsData" :key="slideindex" class="flex-start">
                <div class="giftBox flex-column-between" v-for="(giftItem,giftIndex) in slideItem" :key="giftIndex">
                  <p>{{ giftItem.text }}</p>
                  <img :src="giftItem.picUrl" alt="">
                </div>
              </div>
            </slide>
            <img src="../../../assets/img/qianjin.png" alt="" class="next" @click="$refs.smSlide.next()">
          </div>
        </div>
        <div class="raffle-item">
          <p class="title">美好生活365，充电支付选银联！</p>
          <div class="flower-box">
            <p>活动当天，使用银联和Apple Pay单笔充值的APP用户随机最高减免25元，线上名额银联支付方式限500个，Apple Pay支付方式1500个。数量有限，先到先得。</p>
            <p>a、单卡单日单用户限一次；</p>
            <p>b、微信小程序充电方式不参与；</p>
          </div>
        </div>
        <Footer></Footer>
      </div>
    </Scroll>
    <toast :open="toastVisible" :delay="false" :modal="modalFlag" @close.prevent.stop="closeToast">
      <div slot="tipmes">
        <div v-show="modalFlag" class="rule-wrap">
          <h3>
            <i class="close-btn" @click.stop.prevent="closeToast"></i>
          </h3>
          <section>
            <TipScroll ref="scrollTip" :loadMore="false" :bounce="false">
              <div slot="defaultScroll">
                <p v-for="(i, index) in rules" :key="`RaffleRules${index}`">{{i}}</p>
              </div>
            </TipScroll>
          </section>
        </div>
        <div v-show="!modalFlag">{{toastMes}}</div>
      </div>
    </toast>
  </div>
</template>

<script type="text/ecmascript-6">
  import Header from '../components/header'
  import Footer from '../components/footer'
  import Slide from '../../../components/slide/slide.vue'
  import TipScroll from '../../../components/scroll/list'
  import Scroll from '../../../components/scrollNew/scroll'
  import ScratchCard from '../canvas/scratchCard';
  import toast from '../../../components/feedback/toast';
  import MarqueeTips from 'vue-marquee-tips'
  import {
    getPrizeInfo
  } from '../../../mock/mock';
  import Jsbridge from '../../../utils/jsbridge';
  import functionalTool from '../../../utils/functionTools';
  export default {
    name: 'raffle',
    data() {
      return {
        fixedLine: false,
        posY: 0,
        starTime: '',
        starOver: '',
        lotteryTime: '',
        lotteryOver: '',
        starWait: false,
        lotteryWait: false,
        toastVisible: !1,
        toastMes: '',
        modalFlag: !1,
        animate: true,
        pageIndex: 0,
        userId: functionalTool.getUrlParam('accountId'),
        giftsData: window.picVideoConfig.list,
        videoUrl: window.picVideoConfig.videoUrl,
        rules: [],
        activeData: {},
        prizeData: null,
        cardData: null,
        countTimeBegin: !1,
        dayTimeBegin: !1,
        countTime: '00:00:00',
        lotteryChance: [],
        marqueeContent: [],
        buyPrice: [],
        jsbridge: new Jsbridge()
      }
    },
    components: {
      Header,
      Slide,
      Footer,
      TipScroll,
      Scroll,
      toast,
      ScratchCard,
      MarqueeTips
    },
    created() {},
    computed: {
      beginFlag() {
        return this.countTimeBegin;
      }
    },
    mounted() {
      // this.$root.eventBus.$on('gifts', (gifts) => {
      //   this.$nextTick(() => {
      //     this.giftsData = gifts.list;
      //   })
      // });
      // this.giftsData = window.giftsConfig.list;
      // console.log('giftsData', this.gifts)
      this.$root.eventBus.$on('scrollEnd', (res) => {
        this.pageIndex = res;
      });
      this.$root.eventBus.$on('rules', (r) => {
        this.r = r;
      });
      this.$root.eventBus.$on('activeInfo', (r) => {
        this.activeData = r;
        this.checkCountTime(this.activeData);
        this.lotteryChance.length = r.lotteryChance;
        // this.countTimeBegin && this.updateCountTime(this.activeData);
        this.dayTimeBegin && this.updateCountDay(this.activeData);
        // this.showTime();
        this.activeData.accountId &&
          this.getPrizeCardInfo({
            userId: this.activeData.accountId
          });
      });
      this.getPrizeInfo();
      this.buyPrice = window.buyPrice;
      this.$nextTick(() => {
        this.getOffsetH();
      })
    },
    methods: {
      // 获取初始渲染的时间轴距顶部距离
      getOffsetH() {
        let timelineOffsetH = document.getElementById('defaultHeader').getElementsByClassName('time-line');
        this.offtop = timelineOffsetH[0].offsetTop;
        console.log(timelineOffsetH)
      },
      // 监听滚动条，当滚动的距离绝对值大于offtoplu的时候，timeline固定在窗口顶部
      fixTimeline(pos) {
        this.fixedLine = pos.y <= -this.offtop;
        // this.posY = pos.y <= -194 ? pos.y : 0
      },
      pay(e) {
        if (!this.activeData.accountId) {
          this.jsbridge.call('activityLoginWithAccount', {}, (res) => {
            let result = JSON.parse(res);
            this.$parent.$parent.$parent.ActivityInfo({
              accountId: result.accountId,
              // account: result.account,
              city: result.city
            });
          });
        } else {
          this.jsbridge.call('goToAccountRecharge', {
            amount: e.target.id
          });
        }
      },
      // getStyle (index) {
      //   return `background-image:url(${this.slideData[index].picUrl})`
      // }
      // 选择用户奖品信息
      async getPrizeInfo() {
        try {
          const resData = await getPrizeInfo();
          if (resData.data.code === '200') {
            this.prizeData = resData.data.data;
            for (let i of this.prizeData) {
              i.account && this.marqueeContent.push(i.account + ':' + i.lotteryName);
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async getPrizeCardInfo(param) {
        try {
          const resData = await getPrizeInfo(param);
          if (resData.data.code === '200') {
            this.cardData = resData.data.data;
          }
        } catch (e) {
          console.log(e);
        }
      },
      checkCountTime(r) {
        let currentTime = r.currentTime;
        currentTime = currentTime.replace(new RegExp('-', 'gm'), '/');
        currentTime = new Date(currentTime).getTime();
        this.currentTime = currentTime;
        let activityTime = JSON.parse(r.activityTime);
        let dayStart = activityTime.dayActivityTime.split('--')[0];
        dayStart = dayStart.replace(new RegExp('-', 'gm'), '/');
        dayStart = new Date(dayStart).getTime();
        let lotteryStart = activityTime.lotteryActivityTime.split('--')[0];
        lotteryStart = lotteryStart.replace(new RegExp('-', 'gm'), '/');
        lotteryStart = new Date(lotteryStart).getTime();
        this.dayTimeBegin = currentTime >= dayStart;
      },
      updateCountDay(r) {
        let activityTime = JSON.parse(r.activityTime);
        let lotteryStart = activityTime.lotteryActivityTime.split('--')[0];
        lotteryStart = lotteryStart.replace(new RegExp('-', 'gm'), '/');
        lotteryStart = new Date(lotteryStart).getTime();
        let countTimeValue = parseInt((lotteryStart - this.currentTime) / 1000);
        if (countTimeValue > 0) {
          this.countHandle = setInterval(() => {
            const fixTime = parseInt((lotteryStart - new Date().getTime()) / 1000);
            // 当移动端黑屏再次唤醒时，修正倒计时增量
            if (Math.abs(fixTime - countTimeValue) > 1) {
              countTimeValue = fixTime;
            }
            countTimeValue -= 1;
            this.countTime = this.transformTime(countTimeValue);
            if (countTimeValue <= 0) {
              clearInterval(this.countHandle);
              this.countTimeBegin = this.currentTime >= lotteryStart;
              // 自动进入抽奖倒计时，重置当前时间
              this.currentTime = lotteryStart;
              this.updateCountTime(activityTime);
            }
          }, 1000);
        } else {
          this.countTimeBegin = this.currentTime >= lotteryStart;
          this.countHandle && clearInterval(this.countHandle);
          this.updateCountTime(activityTime);
        }
      },
      updateCountTime(r) {
        let activityTime = r;
        let lotteryEnd = activityTime.lotteryActivityTime.split('--')[1];
        lotteryEnd = lotteryEnd.replace(new RegExp('-', 'gm'), '/');
        lotteryEnd = new Date(lotteryEnd).getTime();
        let countTimeValue = parseInt((lotteryEnd - this.currentTime) / 1000);
        if (countTimeValue > 0) {
          this.countHandle = setInterval(() => {
            const fixTime = parseInt((lotteryEnd - new Date().getTime()) / 1000);
            // 当移动端黑屏再次唤醒时，修正倒计时增量
            if (Math.abs(fixTime - countTimeValue) > 1) {
              countTimeValue = fixTime;
            }
            countTimeValue -= 1;
            this.countTime = this.transformTime(countTimeValue);
            if (countTimeValue <= 0) {
              clearInterval(this.countHandle);
              this.countTime = '抽奖结束';
            }
          }, 1000);
        } else {
          this.countHandle && clearInterval(this.countHandle);
          this.countTime = '抽奖结束';
        }
      },
      transformTime(t) {
        let hours = parseInt(t / 3.6e3);
        let minute = parseInt((t % 3.6e3) / 60);
        let second = parseInt((t % 60));
        return `${this.formatTime(hours)}:${this.formatTime(minute)}:${this.formatTime(second)}`;
      },
      formatTime(t) {
        let formatT = t.toString().length > 1 ? t : `0${t}`
        return formatT;
      },
      openPrizeRule() {
        this.rules = [];
        this.rules = this.r.lotteryRule;
        this.showRules();
      },
      openChargeRule() {
        this.rules = [];
        this.rules = this.r.chargeRule;
        this.showRules();
      },
      showRules() {
        this.toastVisible = !0;
        this.modalFlag = !0;
        this.$nextTick(() => {
          if (this.$refs.scrollTip) {
            this.$refs.scrollTip.scroll && this.$refs.scrollTip.scroll.destroy();
            this.$refs.scrollTip._initComponent();
            this.$refs.scrollTip.scroll && this.$refs.scrollTip.scroll.scrollTo(0, 0);
          }
        });
      },
      // 关闭modal
      closeToast() {
        this.toastVisible = !1;
      }
    }
  };

</script>

<style rel="stylesheet/stylus" lang="stylus">
  @import '../../../assets/css/mixin.styl';
  .raffle-wrap position relative height 100% .raffle-item
  /* height rpx(368)*/

  background-color #543ad0 background-image url("/static/image/henfu.png") background-repeat no-repeat background-size 100% padding rpx(24) rpx(30) rpx(6) background-position rpx(-30) rpx(30) color #ffffff font-size $fontsize-medium .ruleBtn background #fff45c;
  display inline-block;
  padding rpx(8) rpx(32);
  border-radius: 16px;
  box-shadow 2px 6px 20px -3px rgba(120,
  17,
  40,
  0.5);
  color #543ad0;
  font-size $fontsize-medium;
  .important color #fff100 font-size $fontsize-large-xx .title padding: rpx(28) 0 rpx(56) rpx(88);
  img width 100% .flower-box width rpx(640) margin auto background-color #f93662 background-image url("../../../assets/img/flower.png") background-position right bottom;
  background-size rpx(100) background-repeat no-repeat;
  border-radius 8px padding rpx(24) line-height 1.4 box-shadow: 0px 0 8px 2px rgba(29,
  11,
  66,
  0.5);
  .padBox padding rpx(24) p white-space normal word-break break-all text-align justify .text-tip font-size rpx(20) padding rpx(20) 0 text-align center .info background #fa5e81;
  border-radius rpx(8);
  padding rpx(14) rpx(30);
  .tip text-align center;
  font-size $fontsize-small;
  color: #fff100;
  padding: rpx(16) 0;
  .btn-box padding rpx(20) 0 .countTime-info font-size rpx(44) font-weight bold text-align center padding-bottom rpx(24) .Quartz-Mdm font-family 'QuartzMdm' letter-spacing 4px font-size $fontsize-big font-weight bold text-align center padding-bottom rpx(18) .hongbao background-image url("../../../assets/img/hongbaokapian.png") background-size 100% 100% height rpx(230) width rpx(190);
  .price color: #fd3e16;
  font-size: rpx(20);
  height rpx(156) padding: rpx(20) 0;
  line-height 1 margin-bottom rpx(20) p font-size rpx(20) text-align center .num font-size rpx(64) .fourNum font-size $fontsize-large-xxxxx .pay background: #fedc99;
  display: inline-block;
  padding: rpx(4) rpx(24);
  border-radius: 16px;
  font-size: rpx(24);
  color: #fd3e16;

  .scratch-prize height rpx(284) width rpx(490) background-image url("../../../assets/img/guajiang.png") background-size 100% 100% margin rpx(18) auto 0 padding rpx(30) 0 .tip color: #eb6100 font-size $fontsize-large-x text-align center padding rpx(30) 0 .guajiang-btn background-image url("../../../assets/img/guajiangjianbian.png") background-size 100% 100% height rpx(62) width rpx(304) font-size $fontsize-medium text-align center line-height rpx(62) margin auto .marquee display flex padding rpx(30) rpx(50) .marquee-icon display inline-block flex 0 0 rpx(40) width rpx(40) height rpx(40) box-sizing border-box background url('../../../assets/img/laba.png') no-repeat background-size 100% 100% margin-right rpx(10) & p flex 1 & span line-height rpx(40) font-size rpx(24) padding-right rpx(100) .swiper-gift background-color rgba(103,
  103,
  103,
  0.24) padding rpx(36) rpx(52)
  /*margin-bottom rpx(60)*/

  position relative .prev width: rpx(28);
  height: rpx(46);
  position: absolute;
  z-index: 1000;
  left: rpx(26);
  top: 50%;
  transform: translateY(-50%);
  .next width: rpx(28);
  height: rpx(46);
  position: absolute;
  z-index: 1000;
  right: rpx(26);
  top: 50%;
  transform: translateY(-50%);
  .giftBox height rpx(192) width rpx(146) background-color #b32646 padding rpx(20) rpx(20) font-size rpx(20) border-radius 8px margin 0 rpx(16) p padding-bottom rpx(18) text-align center img width rpx(80) .no-pad padding 0 .qipao background-image url("/static/image/henfu.png"),
  url("/static/image/qipao.png") background-position rpx(-30) rpx(30),
  0 rpx(316) .qipao-bottom background-image url("/static/image/henfu.png"),
  url("/static/image/qipao.png") background-position rpx(-30) rpx(30),
  left bottom padding-bottom rpx(100) position relative .scrollH height "calc(100% - %s)" % rpx(140) !important

</style>
